<template>
  <div v-if="isSubmitter || isApprove">
    <div>
      <el-form style="text-align:left">
        <span v-if="isApprove && form.status==1">
          <el-form-item label="审批操作" label-width="140px">
            <el-radio-group v-model="operation">
              <el-radio :label="1">审批</el-radio>
              <el-radio :label="2">退回</el-radio>
              <el-radio :label="4">拒绝</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="退回类型" v-if="operation==2" label-width="140px">
            <el-select v-model="data.back_approve_type" style="width:100%" clearable placeholder="请选择">
              <el-option v-for="item in backOptions" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </span>
        <el-form-item label="审批意见" v-if="isApprove || isSubmitter" label-width="140px">
          <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="data.comments">
          </el-input>
        </el-form-item>
      </el-form>
      <el-button type="default" v-if="isSubmitter" @click.native="submit(1)" :loading="revokeLoading"
        v-permission="'sopItem.edit'">
        撤销
      </el-button>
      <el-button type="primary" v-if="form.status==2 && isApprove" @click.native="submit(2)" :loading="submitLoading"
        v-permission="'sopItem.edit'">
        重新提交
      </el-button>
      <el-button v-if="isApprove && form.status==1" :type="operationApi[operation].type" @click.native="submit"
        :loading="submitLoading" v-permission="'sopItem.edit'">
        {{operationApi[operation].name}}
      </el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Approve',
  props: {
    approveApi: { type: String, default: () => '' },
    backApi: { type: String, default: () => '' },
    revokeApi: { type: String, default: () => '' },
    rejectApi: { type: String, default: () => '' },
    reSubmitApi: { type: String, default: () => '' },
    form: { type: Object, default: () => {} },
    callback: {
      type: Function,
    },
  },
  data() {
    return {
      operation: 1,
      submitText: '',
      user: this.$store.state.user.user,
      operationApi: {
        1: { url: this.approveApi, name: '审批', color: '', type: 'primary' },
        2: { url: this.backApi, name: '退回', type: 'warning' },
        4: { url: this.rejectApi, name: '拒绝', type: 'danger' },
      },
      data: {
        comments: '',
        back_approve_type: '', //1 处理完逐级签回 ，2 处理完直接给我签
      },
      submitLoading: false,
      backOptions: [
        {
          value: '1',
          label: '处理完逐关签回',
        },
        {
          value: '2',
          label: '处理完直接到此关卡',
        },
      ],
    }
  },
  created() {},
  computed: {
    isSubmitter() {
      return this.form.create_user == this.user.userID
    },
    isApprove() {
      if (!this.form.current_approver) return false
      let approverArray = this.form.current_approver.split(',')
      return approverArray.indexOf(this.user.userID) > -1
    },
  },
  methods: {
    submit(flag) {
      let data = {}
      this.data.form_name = this.form.form_name
      this.data.id = this.form.id
      if (this.callback) data = this.callback()
      let tmp = { ...data, ...this.data }
      let url = this.operationApi[this.operation].url
      //撤销
      if (flag == 1) {
        this.revokeLoading = true
        url = this.revokeApi
      }
      //重新提交
      if (flag == 2) {
        this.submitLoading = true
        url = this.reSubmitApi
        tmp = data
      }

      //撤销和退回需要确认
      if (flag == 1 || this.operation == 2) {
        this.$confirm('确定要' + this.operationApi[this.operation].name).then(() => {
          this.request(url, tmp)
        })
      } else {
        if (this.form.status == 1 && this.operation == 1) tmp = [tmp]
        this.submitLoading = true
        this.request(url, tmp)
      }
    },
    request(url, data) {
      this.$request(url, data, 'post')
        .then((r) => {
          this.$message.success('操作成功')
          this.$emit('workflowUpdateEmit', r)
          this.data = {}
        })
        .finally(() => {
          this.submitLoading = false
          this.revokeLoading = false
        })
    },
  },
}
</script>

<style lang="scss" scoped>
</style>
